<script setup>
// #region 引入包, 函数和组件
import { ref } from "vue";
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps(["schedule_list"]);
// #endregion

// #region // 变量

// #endregion

// #region // 函数
// 处理时间函数
const formatDate = (time) => {
  return new Date(time)
    .toLocaleDateString("zh-CN", {
      hour: "2-digit",
      minute: "2-digit",
    })
    .slice(-5);
};
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <ul class="schedule_list">
    <li
      v-show="true"
      v-for="item in schedule_list"
      :key="item.scheduleId"
      :class="{ opacity: !item.isOnsell }"
    >
      <p class="strat">{{ formatDate(item.showAt * 1000) }}</p>
      <p class="type">{{ item.filmLanguage + item.imagery }}</p>
      <p class="price">
        ￥<span>{{ item.salePrice / 100 }}</span>
      </p>
      <p class="goupiao"><span>{{ item.isOnsell ? '购票' : '停售' }}</span></p>
      <p class="end">{{ formatDate(item.endAt * 1000) }}散场</p>
      <p class="room">{{ item.hallName }}</p>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.schedule_list {
  li {
    padding: 0.15rem;
    display: grid;
    grid-template-columns: 0.84rem 1.35rem auto 0.5rem;
    grid-template-rows: 0.225rem 0.195rem;
    grid-row-gap: 0.02rem;
    border-bottom: 0.01rem solid #f4f4f4;
  }

  .opacity {
    p {
      color: #d2d6dc !important;
    }
    span {
      border-color: #d2d6dc !important;
    }
  }

  p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .strat,
  .type {
    color: var(--cl-blk);
    font-size: 0.15rem;
  }

  .end,
  .room {
    font-size: 0.13rem;
    color: var(--cl-wh);
  }

  .price {
    grid-column: 3 / span 1;
    grid-row: 1 / span 2;
    line-height: 0.44rem;
    padding-right: 0.2rem;
    text-align: right;
    color: #ff5f16;
    font-size: 0.1rem;
    span {
      font-size: 0.15rem;
    }
  }
  .goupiao {
    grid-column: 4 / span 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.12rem;
    color: #ff5f16;
    span {
      width: 0.5rem;
      height: 0.25rem;
      border: 0.01rem solid #f77d45;
      line-height: 0.23rem;
      text-align: center;
      border-radius: 0.04rem;
    }
  }
}
</style>
